<html>
<head>
  <style>
    html { background-color: scrollbar; }
    div#tabs { flow:horizontal; border-spacing:4px;}
    div#tabs > label 
    {
      display:block;
      width: max-content;
      max-width:400px;
      color:black;
      border: 1px solid #777;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      padding:4px 12px;
      margin:0;
      background-color: silver;
      behavior:switch; /* so only one has :checked state */
    }
    
    div#tabs > label.placeholder
    {
      visibility:hidden;
    }
    
    div#tabs > label.t1 { background-color:#FFE4E1; }
    div#tabs > label.t2 { background-color:#FFFACD; }
    div#tabs > label.t3 { background-color:#FFEFD5; }    
    div#tabs > label.t4 { background-color:#E6E6FA; }    
    div#tabs > label.t5 { background-color:#CFFFE1; }    
    
    
    div#tabs > label:checked 
    {
      //background-color-bottom-right:white;
      //background-color-bottom-left:white;
      background-color:white;
      position:relative;
      margin:-1px 0;
      padding:4px 12px 6px 12px;
    }
    
    div#panels  
    {
      border: 1px solid #777;
      background-color:white;
      width:*;
      height:*;
    }
    
  </style>  
  <script type="text/tiscript">
    
    include "ddm.tis";
    include "animations.tis";
    
    DragDrop
    {
      what      : "div#tabs > label",
      where     : "div#tabs",
      container : "div#tabs",
      easeDrop  : Animation.Ease.OutQuad
    };
  
  </script>  
</head>
<body>
  <p>Tabs with reordering</p>
  <div #tabs>
    <label checked .t1>First</label>
    <label .t2>Second</label>
    <label .t3>Third</label>
    <label .t4>Fourth</label>
    <label .t5>Fifth</label>
  </div>
  <div #panels>
  </div>
</body>
</html>